<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-sys__log-api">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item label="方法名称">
                    <el-input v-model="dataForm.apiName" maxlength="32" placeholder="模糊查询" clearable></el-input>
                </el-form-item>
                <el-form-item label="创建日期">
                    <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getDataList()" type="primary">{{ $t("query") }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="getReset()">{{ $t("reset") }}</el-button>
                </el-form-item>
            </el-form>
            <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle"
                style="width: 100%">
                <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
                <el-table-column prop="apiName" :label="$t('logApi.apiName')" header-align="center" align="center"
                    min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="apiUri" :label="$t('logApi.requestUri')" header-align="center" align="center"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="apiMethod" :label="$t('logApi.requestMethod')" header-align="center"
                    align="center"></el-table-column>
                <el-table-column prop="apiParams" :label="$t('logApi.requestParams')" header-align="center"
                    align="center" width="150" show-overflow-tooltip></el-table-column>

                <el-table-column prop="ip" :label="$t('logApi.ip')" header-align="center" align="center"
                    width="130"></el-table-column>
                <el-table-column prop="userAgent" :label="$t('logApi.userAgent')" header-align="center" align="center"
                    width="135" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createDate" :label="$t('logApi.createDate')" sortable="custom"
                    header-align="center" align="center" width="155"></el-table-column>
                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="80">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="infoHandle(scope.row.apiParams)">{{
                            $t('logApi.Info')
                        }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: "/sys/log/api/page",
                getDataListIsPage: true,
            },
            dataForm: {
                apiName: '',
                startDate: '',
                endDate: '',
            },
            //日期范围
            dateRange: [],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "当天",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setHours(0, 0, 0);

                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    }
                ]
            },
        };
    },
    methods: {
        //0.重置搜索框
        getReset() {
            this.dataForm = this.$options.data().dataForm;
            this.dateRange = this.$options.data().dateRange;
        },
        // 详细信息
        infoHandle(info) {
            this.$alert(info, this.$t('logApi.Info'), {
                customClass: 'mod-sys__log-api-view-info'
            })
        }
    },

};
</script>

<style lang="scss">
.mod-sys__log-api {
    &-view-info {
        width: 80%;
    }
}
</style>
